import React, { Fragment, useCallback } from 'react'
import './index.less'
import { Button, Form, Input } from 'antd';
import {connect} from 'react-redux'
import {loginAsyncActionCreator} from '../../actions/user'
import { Redirect } from 'react-router-dom';

function Login(props) {

  // 登录
  const userlogin = useCallback(async(values) => {
    props.login(values)
  }, [])

  // 表单提交
  const onFinish = (values) => {
    userlogin(values)
  };

  return props.token ? <Redirect to={'/dashboard'}></Redirect> : (
    <Fragment>
      <div className='app_container'>
        <div className='login_bg'></div>
        <div className='login_div'>
              Hi, 欢迎登录xxx后台系统
          <div className='login_d'>
            <Form
              name="basic"
              layout={'inline'}
              onFinish={onFinish}
              autoComplete="off"
              size='large'
              initialValues={{
                username: 'admin',
              }}
            >
              <Form.Item
                label="账户"
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入账户!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">登录</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </Fragment>
  )
}

const mapStateToProps = (state) => ({
  token: state.user.token,
})
const mapDispatchToProps = {
  login: loginAsyncActionCreator,
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)
